<%--后台生成模式--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <link rel="icon" href="${pageContext.request.contextPath}/static/images/favicon.ico"/>
  <title>二维码</title>
  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-grid.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-reboot.css" type="text/css" rel="stylesheet"/>
  <%--<link href="${pageContext.request.contextPath}/static/bootstrap-colorpicker/css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet"/>--%>
  <link href="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/dist/pickr.min.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/zaddcss/zaddindex.css" type="text/css" rel="stylesheet"/>
  <style type="text/css">
    input[name='okey'] {
      width: 10%;
      border-radius: 5px;
      border: solid rgb(227, 227, 227);
    }

    input[name='otext'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='result'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceSN'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceOriNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    .blockArea {
      border: 5px solid white;
      border-radius: 10px;
    }

    .colorhex {
      width: 80px;
    }

    input {
      border-radius: 5px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
  <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="dropdown06">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
  <form class="form-inline my-2 my-md-0" action="#">
    <label>
      <input class="form-control" type="text" placeholder="Search"/>
    </label>
  </form>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01"
          aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    QA<span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExample01">
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
  </div>
</nav>
<main role="main">
  <section class="jumbotron text-center">
    <div class="container">
      <h3 class="jumbotron-heading">二维码生成</h3>
    </div>
  </section>
  <div class="album py-3 bg-light">
    <div class="container">
      <%--是否勾选了兴邦专用--%>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"
               checked>
        <label class="form-check-label" for="inlineRadio1">兴邦设备专用</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
               value="option2">
        <label class="form-check-label" for="inlineRadio2">普通模式</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"
               disabled>
        <label class="form-check-label" for="inlineRadio3">预留模式(不可用)</label>
      </div>
      <%--是否勾选了兴邦专用 end--%>
      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <%--内容区域 start --%>
          <%--颜色选择--%>
          <div class="blockArea">
            <label for="qrWidth">二维码尺寸(px)
              <input id="qrWidth" value="280" style="width:50px" type="number" step="1"/>
            </label>
            <label for="qrBorderWidth">边框宽度(px)
              <input id="qrBorderWidth" value="10" style="width:50px" type="number" step="1"/>
            </label>
            <label for="qrBorderHeight">边框高度(px)
              <input id="qrBorderHeight" value="10" style="width:50px" type="number" step="1"/>
            </label>
            <label style="margin-left:20px" id="qrSize">尺寸：300*300</label><br>
            <label for="qrContentColor">
              <input id="qrContentColor" type="text" value="" readonly/>
            </label>
            <label for="qrContentColorHex">内容色 HEX：
              <input id="qrContentColorHex" class="colorhex" value="#000000" type="text"/>
            </label>
            <label for="qrContentColorRgb">RGB：
              <input id="qrContentColorRgb" value="rgba(0, 0, 0, 1.0)" type="text"/>
            </label><br>
            <%------------------------%>
            <label for="qrBgColor">
              <input id="qrBgColor" type="text" value="" readonly/>
            </label>
            <label for="qrBgColorHex">背景色 HEX：
              <input id="qrBgColorHex" class="colorhex" value="#FFFFFF" type="text"/>
            </label>
            <label for="qrBgColorRgb">RGB：
              <input id="qrBgColorRgb" value="rgba(255, 255, 255, 1.0)" type="text"/>
            </label><br>
            <%------------------------%>
            <label for="qrBorderColor">
              <input id="qrBorderColor" type="text" value="" readonly/>
            </label>
            <label for="qrBorderColorHex">边框色 HEX：
              <input id="qrBorderColorHex" class="colorhex" value="#FFFFFF" type="text"/>
            </label>
            <label for="qrBorderColorRgb">RGB：
              <input id="qrBorderColorRgb" value="rgba(255, 255, 255, 1.0)" type="text"/>
            </label><br>
            <label for="qrCorrectLevel">纠错级别：</label>
            <select id="qrCorrectLevel" style="width: 10%;border-radius:5px">
              <option value="1">L(低)</option>
              <option value="0" selected>M(中)</option>
              <option value="3">Q(高)</option>
              <option value="2">H(优)</option>
            </select>
            <label for="qrImgType">图片格式：</label>
            <select id="qrImgType" style="width: 10%;border-radius:5px">
              <option value="bmp" selected>bmp</option>
              <option value="png">png</option>
              <option value="jpg">jpg</option>
              <option value="tif">tif</option>
            </select>
          </div>
          <br>
          <%--服务器信息--%>
          <div class="blockArea">
            <P>
              <label for="devicename">图片显示设备号：</label>
              <select id="devicename" style="width: 10%;border-radius:5px">
                <option value="0">否</option>
                <option value="1" selected>是</option>
              </select>
            </P>
            <p>
              <label for="serverAddrList">服务器地址：</label>
              <select id="serverAddrList" style="width: 40%;border-radius:5px">
                <option value="1=1.singbon.com" selected>1.singbon.com</option>
                <option value="2=smartschool.singbon.com">smartschool.singbon.com</option>
                <option value="3=a2.4000063966.com">a2.4000063966.com</option>
                <option value="4=chongdian.4000063966.com">chongdian.4000063966.com</option>
                <option value="5=qisong.4000063966.com">qisong.4000063966.com</option>
                <option value="6=imust.card.4000063966.com">imust.card.4000063966.com</option>
              </select>
            </p>
            <P>
              <label for="versionNumber">二维码版本号：</label>
              <select id="versionNumber" style="width: 40%;border-radius:5px" title="v1  /qrdt.do?dsn= 加密的机器号&#10;v2  /q.do?v=2&s== 机器号&#10;v3  /qrdt.do?dsn= 不加密的机器号">
                <option value="V1">v1</option>
                <option value="V2" selected>v2</option>
                <option value="V3">v3</option>
              </select>
            </P>
            <p>注意:a2服务器请用v2 1服务器请用v1 v3暂时无用(特殊情况下使用)</p>
            <label>始设备号：
              <input name="begindeviceNum" type="text" value="" placeholder="如:1"/>
            </label>
            <label>末设备号：
              <input name="enddeviceNum" type="text" value="" placeholder="如:1"/>
            </label>
          </div>
          <%--生成二维码按钮 区 --%>
          <div class="bd-example">
            <%--<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>--%>
            <%--<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>--%>
            <%----%>
            <button id="makeQr" type="button" title="本程序不保存二维码&#10;请及时下载" class="btn btn-primary">生成二维码</button>
            <%--<a id="selectmakeQr" style="visibility:hidden" href="${pageContext.request.contextPath}/qrmaker/qrDownloadBatch" target="_blank" title="本程序不保存二维码&#10;请及时下载" class="btn btn-primary">批量下载二维码</a>--%>
            <a id="selectmakeQr" style="visibility:visible" href="${pageContext.request.contextPath}/qrmaker/qrDownloadBatch" target="_blank" title="本程序不保存二维码&#10;请及时下载" class="btn btn-primary">批量下载二维码</a>
          </div>
        </div>
        <%--二维码区域 start --%>
        <div class="col-auto d-none d-lg-block">
          <div id="qrcode" style="padding:10px;margin:10px;border: 0 solid #007bff;border-radius:5px;display:block;width:360px;height:360px;text-align:center;"></div>
        </div>
        <%--二维码区域 start --%>
      </div>
      <div id="batchQr"></div>
    </div>
  </div>
</main>
<footer class="text-muted" style="margin-top: -10px">
  <div class="container">
    <p class="float-right">
      <a href="#">返回最上</a>
    </p>
    <p>示例页面 &copy; Bootstrap!</p>
    <p>
      <a href="https://github.com/zghnzch">访问我们的主页</a>
    </p>
  </div>
</footer>
<!-- region 引入js文件-->
<script src="${pageContext.request.contextPath}/static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-4.2.1/site/docs/4.2/assets/js/vendor/bs-custom-file-input.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/dist/pickr.es5.min.js"></script>
<script src="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/gh-page/js/script.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/core.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/cipher-core.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/tripledes.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/encrypt/src/mode-ecb.js"></script>
<script src="${pageContext.request.contextPath}/static/crypto-js-develop/src/myself-need.js"></script>
<script src="${pageContext.request.contextPath}/static/dist/zaddjs/copyContent/copyContent.js"></script>
<script src="${pageContext.request.contextPath}/static/js/qr/qrcodejs-555chy/qrcodejs-master/qrcode.js"
        type="text/javascript"></script>
<!-- endregion 引入js文件-->
<!-- region 元素定义--------------->
<script>
  let qrContentColor = $('#qrContentColor');
  let qrContentColorHex = $("#qrContentColorHex");
  let qrContentColorRgb = $("#qrContentColorRgb");
  /*------------------*/
  let qrBgColor = $('#qrBgColor');
  let qrBgColorHex = $("#qrBgColorHex");
  let qrBgColorRgb = $("#qrBgColorRgb");
  /*------------------*/
  let qrBorderColor = $('#qrBorderColor');
  let qrBorderColorHex = $("#qrBorderColorHex");
  let qrBorderColorRgb = $("#qrBorderColorRgb");
  /*------------------*/
  //设备号码
  let begineleInputNameDeviceNum = $("input[name='begindeviceNum']");
  let endeleInputNameDeviceNum = $("input[name='enddeviceNum']");
  let excelNum = '';
  let excelNums = '';
  /*------------------------*/
  let eleServerAddrList = $("#serverAddrList");
  let eleversionNumber = $("#versionNumber");
  let eleQrWidth = $("#qrWidth");
  let eleQrBorderWidth = $("#qrBorderWidth");
  let eleQrBorderHeight = $("#qrBorderHeight");
  let eleQrCorrectLevel = $("#qrCorrectLevel");
  let isSingbon = $("#inlineRadio1");
  let isCommon = $("#inlineRadio2");
  let inlineRadio3 = $("#inlineRadio3");
  let qrGlobal = undefined;
  let eleqrSize = $('#qrSize');
  let devicename = $('#devicename');
  /*------------------------*/
</script>
<!-- endregion 元素定义--------------->
<%--$(function () {});--%>
<script>
  $(function () {
    /*颜色选择器picolor-------------------------------------*/
    pickrqrContentColor.on('save', (args) => {
      qrContentColorRgb.val(args.toRGBA().toString());
      qrContentColorHex.val(args.toHEX().toString());
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    pickrqrBgColor.on('save', (args) => {
      qrBgColorRgb.val(args.toRGBA().toString());
      qrBgColorHex.val(args.toHEX().toString());
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    pickrqrBorderColor.on('save', (args) => {
      qrBorderColorRgb.val(args.toRGBA().toString());
      qrBorderColorHex.val(args.toHEX().toString());
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    // 纠错级别 select
    eleQrCorrectLevel.on('change', function (event) {
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    // 内容模式 是否要加密
    isSingbon.on('change', function (event) {
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    // 普通模式
    isCommon.on('change', function (event) {
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    // 服务器地址
    eleServerAddrList.on('change', function (event) {
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    eleQrWidth.on('input', function (event) {
      calcQrSize();
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    eleQrBorderWidth.on('input', function (event) {
      calcQrSize();
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    eleQrBorderHeight.on('input', function (event) {
      calcQrSize();
      makeQrOnDiv("qrcode", true, qrContent(begineleInputNameDeviceNum.val()));
    });
    /*---------------------------------*/
    // 单个生成二维码按钮
    // let eleBtnMakeQr = document.getElementById("makeQr")
    let eleBtnMakeQr = $("#makeQr");
    eleBtnMakeQr.click(function () {
      eleBtnMakeQr.attr("disabled", "disabled");
      // eleBtnMakeQr.css("color","rgba(191,198,232,0)");
      // eleBtnMakeQr.addClass("disabled");
      if (begineleInputNameDeviceNum.val() === "" && endeleInputNameDeviceNum.val() === "") {
        alert("请输入开始到结束的设备号");
        eleBtnMakeQr.removeAttr("disabled");
      }
      else {
        let iconImgPath = "${pageContext.request.contextPath}/static/images/squareMyBike.jpg";
        $.ajax({
          type: 'POST', //请求方式
          async: false, //是否异步
          url: "${pageContext.request.contextPath}/qrmaker/make",//
          dataType: 'json',//
          data: {
            /*int qrSize, int colorContent, int colorBg, int colorBorder, int correctLevel, String imgFormat, int serverUri, int qrContent, String logPath,*/
            /* String , int , int , String ,*/
            'qrSize': calcQrSize(),//
            'colorContent': qrContentColorHex.val(),//
            'colorBg': qrBgColorHex.val(),//
            'correctLevel': getCorrectLevel(),//
            'imgFormat': getSelectServerAddr('qrImgType').val(),//
            'serverUri': getSelectServerAddr("serverAddrList").val(),//
            'colorBorder': qrBorderColorHex.val(),//
            'logoPath': iconImgPath,//
            'begindeviceNum': begineleInputNameDeviceNum.val(),//
            'enddeviceNum': endeleInputNameDeviceNum.val(),//
            'versionNumber': getSelectServerAddr("versionNumber").val(),//
            'devicename': devicename.val(),
            /*'qrContent':qrContent,//*/
          }, cache: false,//请求参数
          //ajax提交前的动作
          beforeSend: function () {
          },
          //ajax成功后返回
          success: function (e) {
            // $("#div1").html(e);
            //$("#selectmakeQr").show();
            console.log(e);
            alert(e.name);
            $("#selectmakeQr").css('visibility', 'visible');
            eleBtnMakeQr.removeAttr("disabled");
          },//请求成功
          //ajax提交后的动作
          complete: function (e) {
            eleBtnMakeQr.removeAttr("disabled");
          },
          error: function (e) {
            //请求出错处理
          }//请求错误
        });
      }
    });
    // 下载二维码按钮
    /* let Download = document.getElementById("DownloadQr");
     Download.onclick = function () {
         $.ajax({
             type: 'POST', //请求方式
             async: true, //是否异步
             url: "










    ${pageContext.request.contextPath}/qrmaker/File/download",//
                dataType: 'json',//
                data: {
                }, cache: false,//请求参数
                //ajax成功后返回
                success: function (e) {
                    // $("#div1").html(e);
                    $("#selectmakeQr").show();
                    console.log(e);
                    alert(e.name);

                }



            });
        };*/
    // 批量生成按钮
    /* let inputGroupFileAddon04 = document.getElementById("inputGroupFileAddon04");
     inputGroupFileAddon04.onclick = function () {
         if (excelNum === '' || excelNum.length <= 0) {
             alert("请先选择excel 文件！ ");
         } else {
             //console.log("zch0:"+excelNum.indexOf("\n"));
             //console.log("zch1:"+excelNum.replace(new RegExp("\n","gm"),"#"));
             excelNum = excelNum.replace(new RegExp("\n", "gm"), "#");
             excelNums = excelNum.split("#");
             //for(var i in excelNums){
             //console.log("zch2:"+excelNums.length);
             for (let i = 0; i < excelNums.length; i++) {
                 //console.log("批量内容:"+excelNums[i]);
                 //console.log("zch3:"+excelNums[i].length);
                 if (excelNums[i].length >= 1) {
                     makeQrOnDiv("batchQr", false, qrContent(excelNums[i]));
                 }
             }
         }
     }*/
  })
</script>
<%--方法区--%>
<script type="text/javascript">
  function saveQrImg() {
    //console.log("123456:::"+getSelectServerAddr("qrImgType").val());
    let oCanvas = $("canvas");
    // 获取图片资源
    for (let i = 0; i < oCanvas.length; i++) {
      //console.log(i);
      let img_data1 = oCanvas[i].toDataURL("image/" + getSelectServerAddr("qrImgType").val(), 1.0);
      saveFile(img_data1, 'qr.' + getSelectServerAddr("qrImgType").val());
    }
  }
  // 保存文件
  function saveFile(data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
  }
  // 获取选择的select
  function getSelectServerAddr(selectId) {
    let selectEle = $('#' + selectId + ' option:selected');
    //console.log(selectEle);
    return selectEle;
  }
  // 获取选择的二维码容错级别
  function getCorrectLevel() {
    let level = parseInt(getSelectServerAddr("qrCorrectLevel").val());
    if (level === 0) {
      return QRCode.CorrectLevel.M;
    }
    else if (level === 1) {
      return QRCode.CorrectLevel.L;
    }
    else if (level === 2) {
      return QRCode.CorrectLevel.H;
    }
    else if (level === 3) {
      return QRCode.CorrectLevel.Q;
    }
    else {
      return QRCode.CorrectLevel.M;
    }
  }
  // 获取二维码内容
  function qrContent(txt) {
    if (isSingbon.is(':checked')) {
      let c = parseInt(txt).toString(16).toUpperCase();
      while (c.length < 32) {
        c = "0" + c;
      }
      let enResult = encryptByDES('ycsty', c);
      let enTxt = "http://" + getSelectServerAddr("serverAddrList").val() + "/qrdt.do?dsn=" + enResult;
      return enTxt;
    }
    if (isCommon.is(':checked')) {
      return txt;
    }
    if (inlineRadio3.is(':checked')) {
      return "错误的类型";
    }
  }
  /**
   * 生成二维码方法
   * @param eleDivId 二维码依附的div 的id
   * @param clean 生成前是否需要清空 div
   * @param text  二维码内容
   */
  function makeQrOnDiv(eleDivId, clean, text) {
    let eleDiv = document.getElementById(eleDivId);
    if (clean) {
      eleDiv.innerHTML = "";
    }
    qrGlobal = new QRCode(eleDiv, {
      text: text,
      width: eleQrWidth.val(),
      height: eleQrWidth.val(),
      colorDark: qrContentColorHex.val(),
      colorLight: qrBgColorHex.val(),
      correctLevel: getCorrectLevel(),
      iconSrc: "",
      /*内部图片的边框通过如下配置设置样式*/
      iconRadius: 10,
      iconBorderWidth: 3,
      iconBorderColor: "whiet",
      /*外部图片的边框通过如下配置设置样式*/
      borderWidth: parseInt(eleQrWidth.val()) + parseInt(eleQrBorderWidth.val()) + parseInt(eleQrBorderHeight.val()),
      borderHeight: parseInt(eleQrWidth.val()) + parseInt(eleQrBorderWidth.val()) + parseInt(eleQrBorderHeight.val()),
      // 边框图片 可以自定义的添加图片
      borderImg: "",
      borderBgColor: qrBorderColorHex.val(),
      qrcodeOffsetX: eleQrBorderWidth.val(),
      qrcodeOffsetY: eleQrBorderHeight.val(),
    });
  }
  // 计算总二维码大小
  function calcQrSize() {
    let size = parseInt(eleQrWidth.val()) + parseInt(eleQrBorderWidth.val()) + parseInt(eleQrBorderHeight.val());
    eleqrSize.text("尺寸：" + size + "*" + size);
    return size;
  }
</script>
</body>
</html>
